<template>
  <div class="main-box activity">
    <div class="main">
      <div class="middle">
        <div class="left">
          <live :name="mapArea.name"></live>
        </div>
        <div class="right">
          <p class="refresh">数据每隔五分钟自动刷新
            <button class="btn1" @click="refresh">
              <i class="iconfont">&#xe667;</i>刷新</button>
          </p>
          <ul class="ranking">
            <li>
              <h3 class="title">
                <em></em>以平均睡眠时长排名</h3>
              <div class="content">
                <bar v-if="averageSleep.xData[0] !== '暂无数据'" :settings="averageSleep"></bar>
                <no-data v-else :item="'平均睡眠'" />
              </div>
            </li>
            <li>
              <h3 class="title">
                <em></em>以平均运动强度排名</h3>
              <div class="content">
                <bar v-if="averageExercise.xData[0] !== '暂无数据'" :settings="averageExercise"></bar>
                <no-data v-else :item="'平均运动强度'" />
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="line"></div>
      <div class="bottom">
        <ul class="statistics">
          <li>
            <h3 class="title">
              <em></em>睡眠情况分布</h3>
            <div class="content">
              <pie v-if="sleepQuality.data[0].name !== '暂无数据'" :data="sleepQuality.data" :color="sleepQuality.color" :title="sleepQuality.title" :pieSize="sleepQuality.pieSize"></pie>
              <no-data v-else :item="'睡眠情况'" />
            </div>
          </li>
          <li>
            <h3 class="title">
              <em></em>运动情况分布</h3>
            <ul class="content">
              <pie v-if="sleepQuality.data[0].name !== '暂无数据'" :data="sportQuality.data" :color="sportQuality.color" :title="sportQuality.title" :pieSize="sportQuality.pieSize"></pie>
              <no-data v-else :item="'运动情况'" />
            </ul>
          </li>
          <li>
            <h3 class="title">
              <em></em>幼儿园信息</h3>
            <div class="content">
              <matts :data="gardenOverview"></matts>
            </div>
          </li>
          <li>
            <h3 class="title">
              <em></em>教师信息</h3>
            <ul class="content">
              <li>
                <pie v-if="jobData.data[0].name !== '暂无数据'" :data="jobData.data" :color="jobData.color" :title="jobData.title" :pieSize="jobData.pieSize"></pie>
                <no-data v-else :item="'职称'" />
              </li>
              <li>
                <pie v-if="ageData.data[0].name !== '暂无数据'" :data="ageData.data" :color="ageData.color" :title="ageData.title" :pieSize="ageData.pieSize"></pie>
                <no-data v-else :item="'年龄'" />
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ElMap from '@/common/echarts/Map'
import Live from '@/common/ezviz/Live'
import ElLine from '@/common/echarts/Line'
import Bar from '@/common/echarts/Bar'
import Matts from '@/pages/home/healthy/today/components/Matts'
import Pie from '@/common/echarts/Pie'
import Mixin from '@/pages/virtual/mixin'
export default {
  name: 'HealthyToday',
  components: {
    ElMap,
    ElLine,
    Matts,
    Pie,
    Live,
    Bar
  },
  mixins: [Mixin],
  computed: {
    ...mapGetters({
      averageSleep: 'gradeAverageSleep',
      averageExercise: 'gradeAverageExercise',
      sleepQuality: 'gardenSleepQuality',
      sportQuality: 'gardenSportQuality'
    })
  },
  watch: {
    loading (val) {
      this.toggleLoading(val)
    }
  },
  methods: {
    // 刷新
    async refresh () {
      this.loading = true
      await this.$store.dispatch('fetchSleepOverview')
      await this.$store.dispatch('fetchGradeSportAndSleep')
      this.loading = false
    }
  },
  async mounted () {
    this.$store.commit('setMapTag', '睡眠/体育活动')

    await this.basicFetch()
    await this.refresh()
  }
}
</script>

<style lang="stylus" scoped>
.activity
  .statistics
    li:nth-child(1), li:nth-child(2)
      .content
        padding 20px !important
</style>
